@import "tailwindcss";
@plugin "@tailwindcss/typography";

@source '../../node_modules/@skeletonlabs/skeleton-react/dist';

@import "@skeletonlabs/skeleton";
@import "@skeletonlabs/skeleton/optional/presets";
@import "@skeletonlabs/skeleton/themes/wintry";

body {
  background-image: radial-gradient(
      at 50% 0%,
      var(--color-secondary-100-900) 0px,
      transparent 75%
    ),
    radial-gradient(
      at 100% 0%,
      var(--color-tertiary-300-700) 0px,
      transparent 50%
    );
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  scroll-margin-top: 80px;
}

.prose code::before,
.prose code::after {
  content: none !important;
}

.prose code:not(pre code) {
  @apply bg-primary-100-900 px-1 py-0.5 rounded-sm text-primary-900-100;
}

.prose a code {
  @apply text-primary-500! underline decoration-primary-500;
}

/* Astro PageFind */
.pagefind-ui {
  --pagefind-ui-scale: 0.75;
  --pagefind-ui-primary: var(--color-primary-500);
  --pagefind-ui-text: var(--color-surface-900-100);
  --pagefind-ui-border: var(--color-surface-300-700);
  --pagefind-ui-border-width: 1px;
  --pagefind-ui-border-radius: 0.5rem;

  width: 50%;
  @apply hidden md:block;
}

.pagefind-ui .pagefind-ui__drawer:not(.pagefind-ui__hidden) {
  position: absolute;
  left: 0;
  right: 0;
  margin-top: 0px;
  z-index: 9999;
  padding: 0 2em 1em;
  overflow-y: auto;
  box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.2),
    0 2px 2px 0 rgba(0, 0, 0, 0.1);
  border-bottom-right-radius: var(--pagefind-ui-border-radius);
  border-bottom-left-radius: var(--pagefind-ui-border-radius);

  @apply bg-white dark:bg-surface-900;
}

.pagefind-ui .pagefind-ui__result-link {
  color: var(--pagefind-ui-primary);
}

.pagefind-ui .pagefind-ui__result-excerpt {
  @apply font-normal text-surface-900-100;
}

.pagefind-ui .pagefind-ui__search-input {
  @apply bg-white/50! dark:bg-surface-900/50!;
}

.pagefind-ui .pagefind-ui__search-clear {
  @apply bg-inherit!;
}
